<template>
    <div class="doublebar-chart">
		  <chart :options="doueblebardata" ref="doueblebardata" auto-resize/>
    </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import 'echarts/lib/component/dataZoom'
let echarts1 = require("echarts/lib/echarts");
export default {
  name: 'doubleBarChartVertical',
  components: {
    chart: Echarts
  },
  props: {
    chartData: Object
  },
  data() {
    return {
      doueblebardata: {
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'shadow'
          // }
        },
        grid: {
          left: '2%',
          right: '0%',
          top: '6%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: [0, 0.01],
          axisLine: {//x轴线的样式
  　　　　　　lineStyle: {
  　　　　　　　　type: 'solid',
  　　　　　　　　color: "#EFF0F6",//线的颜色
  　　　　　　　　width:'1'//坐标线的宽度
  　　　　　　}
    　　　 },
          axisLabel: {
            color: "rgba(155,155,155,1)",
            fontSize: 12,
            lineHeight: 20,
            height: 20,
            margin: 10,
            fontFamily: "PingFang SC"
          },
    　　　　axisTick : { //取消刻度线
    　　　　　　show : false
    　　　　}
        },
        yAxis: {
          type: 'value',
          axisLine: {//y轴线的样式
    　　　　　　lineStyle: {
    　　　　　　　　type: 'solid',
    　　　　　　　　color: '#9B9B9B',//线的颜色
    　　　　　　　　width:'0'//坐标线的宽度
    　　　　　　}
    　　　　},
          splitLine: {
            show: true,
            lineStyle: {
              color: "#EFF0F6"
            }
          },
    　　　　axisLabel: {
            color: "rgba(155,155,155,1)",
            show: true,
            inside: false,
            margin: 0,
            verticalAlign: "bottom",
            fontSize: 12,
            fontFamily: "PingFang SC",
            padding: [0, 0, 5, 0]
          },
    　　　　axisTick : { //取消刻度线
    　　　　　　show : false
    　　　　}
        },
        series: [
          {
              name: '人数',
              type: 'bar',
              barWidth: 20,
              data: [],
              itemStyle: {
                  normal: {
                    color: function(params){
                        return new echarts1.graphic.LinearGradient(0, 1, 0, 0, [
                          {offset: 0, color: "#B859F6"},
                          {offset: 1, color: "#7C8DFF"}
                        ]);
                    },
                    barBorderRadius:[4,4,0,0]
                  }
              }  
          },
          {
              name: '次数',
              type: 'bar',
              barWidth: 20,
              data: [],
              itemStyle: {
                  normal: {
                    color: function(params){
                        return new echarts1.graphic.LinearGradient(0, 1, 0, 0, [
                          {offset: 0, color: "#6072FF"},
                          {offset: 1, color: "#2BB1FB"}
                        ]);
                    },
                    barBorderRadius:[4,4,0,0]
                  }
              }  
          }
        ]
      }
    };
  },
  created() {},
  methods: {
    setLine() {
      let self = this;
      this.doueblebardata.xAxis.data = [];
      this.doueblebardata.series[0].name = '';
      this.doueblebardata.series[0].data = [];
      this.doueblebardata.series[1].name = '';
      this.doueblebardata.series[1].data = [];

    //   {
    //       "types": ['人数', '次数'],
    //       "titles": [],
    //       "data": [
    //           [],
    //           []
    //       ]
    //   }

      this.$nextTick(() => {
          var _types = "types" in this.chartData ? this.chartData.types : ['人数', '次数'];
          var _xData = "titles" in this.chartData ? this.chartData.titles : [];
          var _d1 = "data" in this.chartData ? this.chartData.data[0] : [];
          var _d2 = "data" in this.chartData ? this.chartData.data[1] : [];

          this.doueblebardata.xAxis.data = _xData;
          this.doueblebardata.series[0].name = _types[0];
          this.doueblebardata.series[0].data = _d1;
          this.doueblebardata.series[1].name = _types[1];
          this.doueblebardata.series[1].data = _d2;
      });
    }
  },
  watch:{
    chartData:{
      handler(newVal){
        this.setLine()
      },
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setLine();
    })
  }
};
</script>

<style lang="scss">
.doublebar-chart {
  position:relative;
  height: 100%;
  width:100%;
  margin: 0;

  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
